<template>
    <el-container class="home-container">
      <el-header>
        <div>
          <span>个人学习空间系统</span>
        </div>

        <el-menu mode="horizontal" background-color="#545c64" text-color="#fff"
        active-text-color="#ffd04b" :router="true">
          <el-menu-item index="/Desktop" >
            <template slot="title"> 
              <span>桌面</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/Home" >学习管理</el-menu-item>
          <el-menu-item index="/user/User">个人中心</el-menu-item>
          
          
        </el-menu>

        <el-button type = "info" @click="logout">退出</el-button>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '64px':'200px' " >
          <!-- 菜单栏折叠 -->
          <div class="toggle-button" @click="toggleCollapse">>></div>
          <!-- 侧边栏菜单区域 -->
          <!--:default-active保持高亮  -->
          <el-menu
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="isCollapse"  :collapse-transition="false"
          :router="true"
          :default-active="$route.path">
          
          <el-menu-item index="/UserInfo">
          <i class="el-icon-s-custom"></i>
          <span slot="title">个人信息</span>
          </el-menu-item>
          
          
          </el-menu>
        </el-aside>
        <!-- 主体区域 -->
        <el-main>
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

</template>

<script>
import {reset} from '../../router/index.js';
  export default {
    data(){
      return{
        //默认不折叠
        isCollapse:false,
      }
    },

    methods:{
      logout(){
        //清空token，跳转到login
        window.sessionStorage.clear()
        reset()
        this.$router.push('/login')
      },
      //点击按钮切换菜单的折叠展开
      toggleCollapse(){
        this.isCollapse = ! this.isCollapse
      }
      // handleSelect(key, keyPath) {
      //   console.log(key, keyPath);
      // },

    }
  };
</script>

<style >
.home-container{
  height:100%;
}

.el-header{
  background-color: darkslategrey;
  display:flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 30px;

}
.el-aside{
  background-color: lightseagreen;
}
.el-main{
  /* #eaedf */
  /* background-color:#eaedf1; */
  margin: 0px;
  padding: 0px;
}
.toggle-button{
  background-color: #545c64;
  font-size:10px;
  line-height: 24px;
  color:#fff;
  text-align:center;
  letter-spacing: 0.2em;
  cursor:pointer;
}

</style>